<template>
  <div class="chat-area">
    <div class="chat-messages" ref="chatMessages">
      <div 
        class="chat-message" 
        v-for="message in messages" 
        :key="message.id"
      >
        <div class="message-sender">{{ message.sender }}</div>
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
    <div class="chat-input">
      <el-input 
        v-model="newMessage" 
        placeholder="输入消息..."
        @keyup.enter.native="sendMessage"
      ></el-input>
      <el-button 
        type="primary" 
        @click="sendMessage"
        style="margin-left: 10px;"
      >发送</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatArea',
  props: {
    messages: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      
      this.$emit('send-message', this.newMessage);
      this.newMessage = '';
      
      // 滚动到最新消息
      this.$nextTick(() => {
        const container = this.$refs.chatMessages;
        container.scrollTop = container.scrollHeight;
      });
    }
  },
  watch: {
    messages: {
      handler() {
        // 当消息更新时滚动到底部
        this.$nextTick(() => {
          const container = this.$refs.chatMessages;
          container.scrollTop = container.scrollHeight;
        });
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.chat-messages {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 15px;
  border-bottom: 1px solid #333;
  padding-bottom: 15px;
}

.chat-message {
  margin-bottom: 15px;
}

.message-sender {
  font-size: 12px;
  color: #409EFF;
  margin-bottom: 5px;
}

.message-content {
  background-color: #333;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.chat-input {
  display: flex;
}
</style>